<template>
  <div class="">
    <el-form :inline="true">
      <div style="display: flex; justify-content: space-between;">
        <div>
          <el-form-item>
            <el-input v-model="username" clearable placeholder="用户" style="width: 200px;" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="type" clearable placeholder="操作" style="width: 200px;" />
            <!-- <el-select v-model="type" placeholder="操作类型">
              <el-option key="0" label="descontent" value="descontent" />
              <el-option key="0" label="actionname" value="actionname" />
            </el-select> -->
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="date"
              type="daterange"
              range-separator="至"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="init">查询</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <el-table v-loading="listLoading" :data="tableData" border style="width: 100%">
      <el-table-column prop="sysusername" label="操作用户" width="80" align="center" />
      <el-table-column prop="descontent" label="操作说明" align="center" />
      <el-table-column prop="inputcontent" show-overflow-tooltip label="输入内容" align="center" />
      <el-table-column prop="returncontent" label="输出内容" align="center" />
      <el-table-column prop="actionname" label="调用方法" align="center" />
      <el-table-column prop="setip" label="IP地址" align="center" />
      <el-table-column prop="ctime" label="操作时间" width="180" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.ctime.replace('T',' ') }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="totalCount>10"
      layout="prev, pager, next"
      :total="totalCount"
      @current-change="idx=>{PageIndex = idx}"
    />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { GetSysUserLogs } from '@/api/sys.js'
export default {
  name: 'Name',
  data() {
    return {
      type: '',
      username: '',
      date: ['', ''],

      listLoading: false,
      tableData: [],
      totalCount: 0,
      PageIndex: 1
    }
  },
  computed: {},
  watch: {
    PageIndex(val) {
      console.log(val)
      this.getData()
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    /**刷新加载 */
    async init() {
      this.PageIndex = 1
      this.getData()
    },
    async getData(address) {
      this.listLoading = true
      const { list, pageIndex, totalCount } = await GetSysUserLogs({
        username: this.username,
        type: this.type,
        stime: this.date ? this.date[0] : '',
        etime: this.date ? this.date[1] : '',
        PageIndex: this.PageIndex,
        PageSize: 10
      })
      this.totalCount = totalCount
      this.tableData = list
      this.listLoading = false
    }
  }
}
</script>

<style lang="scss" scoped></style>
<style lang="scss">
  .el-table .warning-row {
    background: oldlace;
  }
</style>
